<template>

  <div class="rose-pie" :id="id"></div>

</template>

<script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/pie'
  import { mapActions, mapState} from 'vuex'
  export default {
    props: {
      id: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapState(['areaData']),
    },
    data () {
      return {
        areaColor: ['#3b73ff', '#33f3b4', '#51dfec', '#4830ff', '#8330ff'],
        legend: ['本地', '外地']
      }
    },
    watch: {
      areaData (val, oldval) {
        this.onReady()
      }
    },
    mounted () {
      this.onReady()
    },
    methods: {
      onReady () {
        const { id, areaData, legend, areaColor } = this
        const options = {
          title : {
            text: '本地外地比例',
            left: '11%',
            y : 'center',
            textStyle: {
              color: '#ffffff',
              fontWeight: 'normal',
              fontSize: 16
            }
          },
          tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          legend: {
            right : 0,
            y : 'center',
            itemGap: 40,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#ffffff',
              fontSize: 16
            },
            orient: 'vertical',
            data: legend
          },
          calculable : true,
          series : [
            {
              name:null,
              type:'pie',
              radius : ['60%', '75%'],
              center : ['38%', '50%'],
              roseType : 'radius',
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false
                }
              },
              lableLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data:areaData
            }
          ],
          color: areaColor
        }
        const myPie = echarts.init(document.getElementById(id))
        myPie.setOption(options, true)
        window.addEventListener('resize', function () {
          myPie.resize()
        })
      }
    }
  }
</script>

<style lang="css" scoped>
  .rose-pie{
    width: 26%;
    height: 70%;
  }
</style>
